<template>
  <view class="main">
    <view class="user-content" v-if="userInfo">
      <view class="main-bg"></view>
      <view class="user-box">
          <view class="user-head">
            <view class="user-img">
              <image class="img" :src="logo" :mode="aspectFill" />
              <!-- <up-lazy-load class="img" img-mode="aspectFill" :image="logo"></up-lazy-load> -->
            </view>
            <view class="user-info">
              <view class="user-name">{{  maskPhoneNumber(userInfo.phoneNum) }}</view>
              <view class="user-hint"></view>
            </view>
          </view>
          <view class="user-nva">
            <view class="user-item" @click="handleToPage('/subpkgs/mine/detailed/point')">
              <view class="item-val">{{ userPointCount }}</view>
              <view class="item-title">我的积分</view>
            </view>
            <view class="user-item" @click="handleToPage('/subpkgs/mine/address/list')">
              <view class="item-val">{{ userInfo.expressCount }}</view>
              <view class="item-title">收货地址</view>
            </view>
            <view class="user-item" @click="handleSwitchPage('/pages/order/index')">
              <view class="item-val">{{ userInfo.normalOrderCount}}</view>
              <view class="item-title">全部订单</view>
            </view>
            <view class="user-item" @click="handleToPage('/subpkgs/mine/detailed/bonus')">
              <view class="item-val">{{ userBonusCount }}</view>
              <view class="item-title">提现(返点)</view>
            </view>
          </view>
      </view>
      <view class="menu">
        <view class="menu-item" @click="customerServiceShow = true">
          <view class="item-name">
            <image class="img" mode="widthFix" src="@/static/svg/icon_kefu.svg" />
             <text>联系客服</text>
          </view>
          <view class="item-hint">
            <text>添加客服微信</text>
            <text class="iconfont icon-more" ></text>
          </view>
        </view>
        <!-- <view class="menu-item" v-for="(item, index) in menuList" :key="index" @click="handleMenu(item)">
          <view class="item-name">
            <text class="iconfont icon-cart" ></text>
           <text>{{ item.name }}</text>
          </view>
          <view class="item-hint">
            <text class="iconfont icon-more" ></text>
          </view>
        </view> -->
      </view>
    </view>
    <TabBar></TabBar>
    <Login />
    <HintDialog type="customerService" :show="customerServiceShow" @cancel="()=> {customerServiceShow = false}" />
  </view>
</template>

<script setup>
import { reactive, ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { onLoad, onReachBottom, onPullDownRefresh, onShow } from '@dcloudio/uni-app'
import { getOrderListApi } from '@/api/user'
import logo from '@/static/images/login/login_logo.png'
const store = useStore()
const isLogin = computed(()=> {
  return store.state.user.isLogin
})
watch(
  () => isLogin.value,
  (v) => {
    v && init()
  },
);
const sysConfig = computed(()=> {
  return store.state.app.config
})
const userPointCount = computed(()=> {
  return store.state.user.userPointCount
})
const userBonusCount = computed(()=> {
  return store.state.user.userBonusCount
})
const addressList = computed(()=> {
  return store.state.user.addressList
})
const userInfo = computed(() => store.getters['user/userInfo']);
const isVip = computed(() => {
  return store.state.user.isVip
});

const orderCount = ref(0)

const customerServiceShow = ref(false)

const menuList = ref([
  {
    beforeIcon: '',
    name: '提现申请',
    hint: '',
    path: '/subpkgs/mine/withdraw/submit'
  },
  {
    beforeIcon: '',
    name: '我的提现申请',
    hint: '',
    path: '/subpkgs/mine/withdraw/mine'
  },
  {
    beforeIcon: '',
    name: '平台提现申请',
    hint: '',
    path: '/subpkgs/mine/withdraw/all'
  },
])
onLoad(()=> {
  console.log(store)
  // console.log(store.user.state)
  // userStore.getUserInfo()
  // init()
})

// onPullDownRefresh( async ()=> {
// })
onReachBottom(()=> {
})
onShow(()=> {
  init()
})
async function init(){
  store.dispatch('user/getUserInfo')
  store.dispatch('user/getUserPointCount')
  store.dispatch('user/getUserBonusCount')
  store.dispatch('user/getAddressList')
  await getOrderList()
}
async function getOrderList(){
  const res = await getOrderListApi({orderType: 1})
  // debugger
  orderCount.value = res.total
}
function maskPhoneNumber(phoneNumber) {
  // 正则表达式匹配中国大陆手机号码格式
  const pattern = /^(\d{3})\d{4}(\d{4})$/;
  return phoneNumber.replace(pattern, '$1****$2');
}
function handleMenu(menuItem) {
  if(menuItem.path) {
    uni.navigateTo({
      url: menuItem.path
    })
  }
}
function handleToPage(path) {
  uni.navigateTo({
    url: path
  })
}
function handleSwitchPage(path) {
  uni.switchTab({
    url: path
  })
}
</script>

<style lang='scss' scoped>
.main{
  min-height: 100vh;
  background: #F4F6F8;
  position: relative;
  width: 100vw;
  overflow-x: hidden;
  .main-bg{
    position: absolute;
    top: 0;
    left: 50%;
    width: 200vw;
    height: 240rpx;
    transform: translateX(-50%);
    background: #FF8F1F;
    border-radius: 0px 0px 60vw 60vw;
    z-index: 0;
  }
  .user-content{
    padding-top: 48rpx;
    position: relative;
    background: #fff;
  }
  .user-box{
    position: relative;
    z-index: 1;
    width: 686rpx;
    height: 304rpx;
    margin: 0 auto;
    background: #FFFFFF;
    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(255,131,4,0.1);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    // padding: 40rpx;
    .user-head{
      padding: 40rpx;
      display: flex;
      .user-img{
        width: 100rpx;
        height: 100rpx;
        background: #D8D8D8;
        overflow: hidden;
        margin-right: 24rpx;
        .img{
          width: 100rpx;
          height: 100rpx;
        }
      }
      .user-info{
        .user-name{
          font-weight: 500;
          font-size: 32rpx;
          color: #282828;
          line-height: 47rpx;
          margin-bottom: 3rpx;
        }
        .user-hint{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 36rpx;
        }
      }
    }
    .user-nva{
      display: flex;
      justify-content: space-between;
      .user-item{
        flex: 1;
        padding-bottom: 35rpx;
        position: relative;
        &::after{
          position: absolute;
          right: 0;
          top: 24rpx;
          display: block;
          content: '';
          height: 36rpx;
          width: 1rpx;
          background: #eee;
        }
        &:last-child{
          &::after{
            display: none;
          }
        }
        .item-val{
          font-weight: 400;
          font-size: 36rpx;
          color: #FF8304;
          line-height: 50rpx;
          text-align: center;
          margin-bottom: 3rpx;
        }
        .item-title{
          font-weight: 400;
          font-size: 24rpx;
          color: #999999;
          line-height: 36rpx;
          text-align: center;
        }
      }
    }
  }
  .menu{
    padding: 0 32rpx;
    .menu-item{
      padding: 46rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-name{
        font-weight: 400;
        font-size: 28rpx;
        color: #343434;
        display: flex;
       align-items: center;
        .img{
          width: 36rpx;
          margin-right: 18rpx;
        }
        // .iconfont{
        //   margin-right: 18rpx;
        //   font-size: 36rpx;
        // }
      }
      .item-hint{
        font-weight: 400;
        font-size: 24rpx;
        color: #999999;
        line-height: 36rpx;
        .iconfont{
          margin-left: 16rpx;
        }
      }
    }
  }
}
.customer-service{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  .customer-service-content{
    width: 520rpx;
    height: 714rpx;
    background:  #FFFFFF;
    border-radius: 20rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24rpx;
    position: relative;
    .iconfont{
      font-size: 72rpx;
      color: #666;
    }
    .text{
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
      line-height: 41rpx;
      text-align: center;
    }
    .close{
      position: absolute;
      bottom: -128rpx;
      left: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 72rpx;
      height: 72rpx;
      background: #858585;  
      border-radius: 50%;
      transform: translateX(-50%);
      .iconfont{
        font-size: 17rpx;
        color: #fff;
      }
    }
  }
  .qrcode{
    width: 400rpx;
    height: 400rpx;
  }
}
</style>
